<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cartzilla | Cards</title>
    <!-- SEO Meta Tags-->
    <meta name="description" content="Cartzilla - Bootstrap E-commerce Template">
    <meta name="keywords" content="bootstrap, shop, e-commerce, market, modern, responsive,  business, mobile, bootstrap, html5, css3, js, gallery, slider, touch, creative, clean">
    <meta name="author" content="Createx Studio">
    <!-- Viewport-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon and Touch Icons-->
    <link rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png">
    <link rel="manifest" href="../site.webmanifest">
    <link rel="mask-icon" color="#fe6a6a" href="../safari-pinned-tab.svg">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#ffffff">
    <!-- Vendor Styles including: Font Icons, Plugins, etc.-->
    <link rel="stylesheet" media="screen" href="../vendor/simplebar/dist/simplebar.min.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/tiny-slider/dist/tiny-slider.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/prismjs/themes/prism.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/prismjs/plugins/toolbar/prism-toolbar.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/prismjs/plugins/line-numbers/prism-line-numbers.css"/>
    <!-- Main Theme Styles + Bootstrap-->
    <link rel="stylesheet" media="screen" href="../css/theme.min.css">
    <!-- Google Tag Manager-->
    <script>
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-WKV3GT5');
    </script>
  </head>
  <!-- Body-->
  <body>
    <!-- Google Tag Manager (noscript)-->
    <noscript>
      <iframe src="//www.googletagmanager.com/ns.html?id=GTM-WKV3GT5" height="0" width="0" style="display: none; visibility: hidden;"></iframe>
    </noscript>
    <main class="container-fluid">
      <!-- Main content-->
      <section class="offcanvas-enabled row pb-3 pb-md-4">
        <div class="col-xxl-9">
          <!-- Navbar-->
          <header class="navbar navbar-expand navbar-light fixed-top bg-light shadow-sm px-3 px-lg-4" data-scroll-header data-fixed-element><a class="navbar-brand d-lg-none" href="typography.html"><img src="../img/logo-dark.png" width="142" alt="Cartzilla"></a>
            <ul class="navbar-nav ms-auto d-none d-lg-flex">
              <li class="nav-item"><a class="nav-link" href="../index.html"><i class="ci-eye align-middle mt-n1 me-2"></i>Live preview</a></li>
              <li class="nav-item">
                <div class="nav-link disabled text-border px-1">|</div>
              </li>
              <li class="nav-item"><a class="nav-link" href="../docs/dev-setup.html"><i class="ci-book align-middle mt-n1 me-2"></i>Documentation</a></li>
              <li class="nav-item">
                <div class="nav-link disabled text-border px-1">|</div>
              </li>
            </ul>
            <button class="navbar-toggler d-block d-lg-none ms-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#components-nav"><span class="navbar-toggler-icon"></span></button><a class="btn btn-primary btn-shadow ms-2 ms-lg-4" href="https://themes.getbootstrap.com/product/cartzilla-bootstrap-e-commerce-template-ui-kit/" target="_blank" rel="noopener"><i class="ci-cart me-2 d-none d-sm-inline-block"></i>Buy now</a>
          </header>
          <!-- Side navigation-->
          <aside class="offcanvas offcanvas-expand bg-dark" id="components-nav">
            <div class="offcanvas-cap bg-darker d-none d-lg-block"><a class="navbar-brand py-1" href="typography.html"><img src="../img/logo-light.png" width="142" alt="Cartzilla"></a><span class="badge bg-info">Components</span></div>
            <div class="offcanvas-cap bg-darker align-items-center d-flex d-lg-none">
              <div class="d-flex align-items-center">
                <h5 class="text-light mb-0 me-2">Menu</h5><span class="badge bg-info">Components</span>
              </div>
              <button class="btn-close btn-close-white" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body" data-simplebar data-simplebar-auto-hide="true">
              <div class="pt-4 pb-3 mt-lg-3">
                <div class="d-flex d-lg-none pb-4 mb-4 border-bottom border-light"><a class="btn btn-outline-light btn-sm me-3" href="../index.html"><i class="ci-eye align-middle mt-n1 me-2"></i>Live demo</a><a class="btn btn-light btn-sm ps-2" href="../docs/dev-setup.html"><i class="ci-book align-middle mt-n1 me-2"></i>Documentation</a></div>
                <div class="widget widget-links widget-light border-bottom border-light mb-4 pb-4 me-n3">
                  <h3 class="widget-title text-white">Content</h3>
                  <ul class="widget-list">
                    <li class="widget-list-item"><a class="widget-list-link" href="typography.html">Typography</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="icon-font.html">Icon font</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="code.html">Code</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="images.html">Images &amp; figures</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="tables.html">Tables</a></li>
                  </ul>
                </div>
                <div class="widget widget-links widget-light border-bottom border-light mb-4 pb-4 me-n3">
                  <h3 class="widget-title text-white">Components</h3>
                  <ul class="widget-list">
                    <li class="widget-list-item"><a class="widget-list-link" href="accordion.html">Accordion</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="alerts.html">Alerts</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="badge.html">Badges</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="blog-components.html">Blog components</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="breadcrumb.html">Breadcrumb</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="buttons.html">Buttons</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="button-group.html">Button group</a></li>
                    <li class="widget-list-item active"><a class="widget-list-link" href="cards.html">Cards</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="carousel.html">Carousel</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="charts.html">Charts</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="collapse.html">Collapse</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="contacts-card.html">Contacts card</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="countdown.html">Countdown</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="dropdowns.html">Dropdowns</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="footer.html">Footer</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="forms.html">Forms</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="gallery.html">Gallery</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="input-group.html">Input group</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="list-group.html">List group</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="modal.html">Modal</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="navbar.html">Navbar</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="pagination.html">Pagination</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="pills.html">Pills</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="popovers.html">Popovers</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="progress.html">Progress</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="shop-components.html">Shop components</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="social-buttons.html">Social buttons</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="spinners.html">Spinners</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="steps.html">Steps</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="tabs.html">Tabs</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="team.html">Team</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="testimonials.html">Testimonials / reviews</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="toasts.html">Toasts</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="tooltips.html">Tooltips</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="video-button.html">Video button</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="widgets.html">Widgets</a></li>
                  </ul>
                </div>
                <div class="widget widget-links widget-light mb-4 pb-2">
                  <h3 class="widget-title text-white">Utilities</h3>
                  <ul class="widget-list">
                    <li class="widget-list-item"><a class="widget-list-link" href="https://getbootstrap.com/docs/5.0/utilities/borders/" target="_blank" rel="noopener">Bootstrap</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="utilities.html">Cartzilla</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </aside>
          <!-- Page title-->
          <div class="border-bottom mt-lg-2 pt-5 pb-2 mb-5">
            <h1 class="mt-3 mt-lg-4 pt-5">Cards</h1>
            <div class="d-flex flex-wrap flex-md-nowrap justify-content-between">
              <p class="text-muted">Flexible and extensible content container.</p>
              <p class="fs-sm ps-md-4"><a class="text-nowrap" href="https://getbootstrap.com/docs/5.0/components/card/" target="_blank" rel="noopener">Bootstrap docs<i class="ci-arrow-right align-middle ms-1"></i></a></p>
            </div>
          </div>
          <div class="alert alert-info d-flex mt-n3 mb-5" role="alert">
            <div class="alert-icon"><i class="ci-announcement"></i></div>
            <p class="fs-md text-break mb-0">Masonry grid layout depends on <strong>Shuffle.js</strong> and <strong>ImagesLoaded</strong> plugins. Make sure to link to <strong>Shuffle.js</strong> and <strong>ImagesLoaded</strong> files in your document: <strong>vendor/imagesloaded/imagesloaded.pkgd.min.js</strong> and <strong>vendor/shufflejs/dist/shuffle.min.js</strong>. Use this page as a reference.</p>
          </div>
          <!-- No image-->
          <section class="pb-5 mb-md-2" id="card-no-image">
            <h2 class="h5 mb-3">No image</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result1" data-bs-toggle="tab" role="tab" aria-controls="result1" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html1" data-bs-toggle="tab" role="tab" aria-controls="html1" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug1" data-bs-toggle="tab" role="tab" aria-controls="pug1" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result1" role="tabpanel">
                    <div class="card" style="max-width: 20rem;">
                      <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text fs-sm text-muted">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p><a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html1" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- No image --&gt;
&lt;div class=&quot;card&quot;&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm text-muted&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-sm btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug1" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// No image
.card
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm.text-muted
      | Some quick example text to build on the card title and make up the bulk of the card's content.
    a.btn.btn-sm.btn-primary(href=&quot;#&quot;) Go somewhere
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Alternative card style-->
          <section class="pb-5 mb-md-2" id="card-alt-style">
            <h2 class="h5 mb-3">Alternative card style</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result2" data-bs-toggle="tab" role="tab" aria-controls="result2" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html2" data-bs-toggle="tab" role="tab" aria-controls="html2" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug2" data-bs-toggle="tab" role="tab" aria-controls="pug2" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result2" role="tabpanel">
                    <div class="card border-0 shadow" style="max-width: 20rem;">
                      <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text fs-sm text-muted">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p><a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html2" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Alternative card style: no border + shadow --&gt;
&lt;div class=&quot;card border-0 shadow&quot;&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm text-muted&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-sm btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug2" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Alternative card style: no border + shadow
.card.border-0.shadow
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm.text-muted
      | Some quick example text to build on the card title and make up the bulk of the card's content.
    a.btn.btn-sm.btn-primary(href=&quot;#&quot;) Go somewhere
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Image on top-->
          <section class="pb-5 mb-md-2" id="card-top-image">
            <h2 class="h5 mb-3">Image on top</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result3" data-bs-toggle="tab" role="tab" aria-controls="result3" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html3" data-bs-toggle="tab" role="tab" aria-controls="html3" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug3" data-bs-toggle="tab" role="tab" aria-controls="pug3" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result3" role="tabpanel">
                    <div class="card" style="max-width: 20rem;"><img class="card-img-top" src="../img/components/cards/01.jpg" alt="Card image">
                      <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text fs-sm text-muted">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p><a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html3" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Image on top --&gt;
&lt;div class=&quot;card&quot;&gt;
  &lt;img src=&quot;pat-to-image&quot; class=&quot;card-img-top&quot; alt=&quot;Card image&quot;&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm text-muted&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-sm btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug3" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Image on top
.card
  img(src=&quot;path-to-image&quot;, alt=&quot;Card image&quot;).card-img-top
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm.text-muted
      | Some quick example text to build on the card title and make up the bulk of the card's content.
    a.btn.btn-sm.btn-primary(href=&quot;#&quot;) Go somewhere
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Image on bottom-->
          <section class="pb-5 mb-md-2" id="card-bottom-image">
            <h2 class="h5 mb-3">Image on bottom</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result4" data-bs-toggle="tab" role="tab" aria-controls="result4" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html4" data-bs-toggle="tab" role="tab" aria-controls="html4" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug4" data-bs-toggle="tab" role="tab" aria-controls="pug4" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result4" role="tabpanel">
                    <div class="card" style="max-width: 20rem;">
                      <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text fs-sm text-muted">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p><a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
                      </div><img class="card-img-bottom" src="../img/components/cards/02.jpg" alt="Card image">
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html4" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Image on bottom --&gt;
&lt;div class=&quot;card&quot;&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm text-muted&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-sm btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
  &lt;/div&gt;
  &lt;img src=&quot;pat-to-image&quot; class=&quot;card-img-bottom&quot; alt=&quot;Card image&quot;&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug4" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Image on bottom
.card
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm.text-muted
      | Some quick example text to build on the card title and make up the bulk of the card's content.
    a.btn.btn-sm.btn-primary(href=&quot;#&quot;) Go somewhere
  img(src=&quot;path-to-image&quot;, alt=&quot;Card image&quot;).card-img-bottom
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Horizontal layout-->
          <section class="pb-5 mb-md-2" id="card-horizontal">
            <h2 class="h5 mb-3">Horizontal layout</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result5" data-bs-toggle="tab" role="tab" aria-controls="result5" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html5" data-bs-toggle="tab" role="tab" aria-controls="html5" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug5" data-bs-toggle="tab" role="tab" aria-controls="pug5" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result5" role="tabpanel">
                    <div class="card" style="max-width: 34rem;">
                      <div class="row g-0">
                        <div class="col-sm-4"><img class="rounded-start" src="../img/components/cards/03.jpg" alt="Card image"></div>
                        <div class="col-sm-8">
                          <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text fs-sm text-muted">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p><a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html5" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Horizontal card layout --&gt;
&lt;div class=&quot;card&quot; style=&quot;max-width: 540px;&quot;&gt;
  &lt;div class=&quot;row g-0&quot;&gt;
    &lt;div class=&quot;col-sm-4&quot;&gt;
      &lt;img src=&quot;pat-to-image&quot; class=&quot;rounded-start&quot; alt=&quot;Card image&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-sm-8&quot;&gt;
      &lt;div class=&quot;card-body&quot;&gt;
        &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
        &lt;p class=&quot;card-text fs-sm text-muted&quot;&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
        &lt;a href=&quot;#&quot; class=&quot;btn btn-sm btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug5" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Horizontal card layout
.card(style=&quot;max-width: 540px;&quot;)
  .row.g-0
    .col-sm-4
      img(src=&quot;path-to-image&quot;, alt=&quot;Card image&quot;).rounded-start
    .col-sm-8
      .card-body
        h5.card-title
          | Card title
        p.card-text.fs-sm.text-muted
          | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
        a.btn.btn-sm.btn-primary(href=&quot;#&quot;) Go somewhere
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Header and footer-->
          <section class="pb-5 mb-md-2" id="card-header-footer">
            <h2 class="h5 mb-3">Header and footer</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result6" data-bs-toggle="tab" role="tab" aria-controls="result6" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html6" data-bs-toggle="tab" role="tab" aria-controls="html6" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug6" data-bs-toggle="tab" role="tab" aria-controls="pug6" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result6" role="tabpanel">
                    <div class="card text-center">
                      <div class="card-header">Featured</div>
                      <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
                      </div>
                      <div class="card-footer fs-sm text-muted">3 days ago</div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html6" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Header and footer --&gt;
&lt;div class=&quot;card text-center&quot;&gt;
  &lt;div class=&quot;card-header&quot;&gt;Featured&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title&quot;&gt;Special title treatment&lt;/h5&gt;
    &lt;p class=&quot;card-text&quot;&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-sm btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class=&quot;card-footer fs-sm text-muted&quot;&gt;3 days ago&lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug6" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Header and footer
.card.text-center
  .card-header Featured
  .card-body
    h5.card-title
      | Special title treatment
    p.card-text
      | With supporting text below as a natural lead-in to additional content.
    a.btn.btn-sm.btn-primary(href=&quot;#&quot;) Go somewhere
  .card-footer.fs-sm.text-muted 3 days ago
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Text alignment-->
          <section class="pb-5 mb-md-2" id="card-text-alignment">
            <h2 class="h5 mb-3">Text alignment</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result7" data-bs-toggle="tab" role="tab" aria-controls="result7" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html7" data-bs-toggle="tab" role="tab" aria-controls="html7" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug7" data-bs-toggle="tab" role="tab" aria-controls="pug7" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result7" role="tabpanel">
                    <div class="row">
                      <div class="col-md-4 mb-4">
                        <div class="card">
                          <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text fs-sm text-muted">With supporting text below as a natural lead-in to additional content.</p><a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-4 mb-4">
                        <div class="card text-center">
                          <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text fs-sm text-muted">With supporting text below as a natural lead-in to additional content.</p><a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-4 mb-4">
                        <div class="card text-end">
                          <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text fs-sm text-muted">With supporting text below as a natural lead-in to additional content.</p><a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html7" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Left aligned (default) --&gt;
&lt;div class=&quot;card&quot;&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm text-muted&quot;&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-sm btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Center aligned --&gt;
&lt;div class=&quot;card text-center&quot;&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-smtext-muted&quot;&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-sm btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Right aligned --&gt;
&lt;div class=&quot;card text-end&quot;&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm text-muted&quot;&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-sm btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug7" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Left aligned (default)
.card
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm.text-muted
      | With supporting text below as a natural lead-in to additional content.
    a.btn.btn-sm.btn-primary(href=&quot;#&quot;) Go somewhere

// Center aligned
.card.text-center
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm.text-muted
      | With supporting text below as a natural lead-in to additional content.
    a.btn.btn-sm.btn-primary(href=&quot;#&quot;) Go somewhere

// Right aligned
.card.text-end
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm.text-muted
      | With supporting text below as a natural lead-in to additional content.
    a.btn.btn-sm.btn-primary(href=&quot;#&quot;) Go somewhere
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Navigation: Tabs-->
          <section class="pb-5 mb-md-2" id="card-nav-tabs">
            <h2 class="h5 mb-3">Navigation: Tabs</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result8" data-bs-toggle="tab" role="tab" aria-controls="result8" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html8" data-bs-toggle="tab" role="tab" aria-controls="html8" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug8" data-bs-toggle="tab" role="tab" aria-controls="pug8" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result8" role="tabpanel">
                    <div class="card text-center">
                      <div class="card-header">
                        <ul class="nav nav-tabs card-header-tabs">
                          <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                          <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
                        </ul>
                      </div>
                      <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html8" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Tabs inside card header --&gt;
&lt;div class=&quot;card text-center&quot;&gt;
  &lt;div class=&quot;card-header&quot;&gt;
    &lt;ul class=&quot;nav nav-tabs card-header-tabs&quot;&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;nav-link active&quot;&gt;Active&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Link&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;nav-link disabled&quot;&gt;Disabled&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title&quot;&gt;Special title treatment&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm text-muted&quot;&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-sm btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug8" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Tabs inside card header
.card.text-center
  .card-header
    ul.nav.nav-tabs.card-header-tabs
      li.nav-item
        a.nav-link.active(href=&quot;#&quot;) Active
      li.nav-item
        a.nav-link(href=&quot;#&quot;) Link
      li.nav-item
        a.nav-link.disabled(href=&quot;#&quot;) Disabled
  .card-body
    h5.card-title Special title treatment
    p.card-text With supporting text below as a natural lead-in to additional content.
    a.btn.btn-sm.btn-primary(href=&quot;#&quot;) Go somewhere
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Navigation: Pills-->
          <section class="pb-5 mb-md-2" id="card-nav-pills">
            <h2 class="h5 mb-3">Navigation: Pills</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result9" data-bs-toggle="tab" role="tab" aria-controls="result9" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html9" data-bs-toggle="tab" role="tab" aria-controls="html9" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug9" data-bs-toggle="tab" role="tab" aria-controls="pug9" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result9" role="tabpanel">
                    <div class="card text-center">
                      <div class="card-header">
                        <ul class="nav nav-pills card-header-pills">
                          <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                          <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
                        </ul>
                      </div>
                      <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html9" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Pills inside card header --&gt;
&lt;div class=&quot;card text-center&quot;&gt;
  &lt;div class=&quot;card-header&quot;&gt;
    &lt;ul class=&quot;nav nav-pills card-header-pills&quot;&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;nav-link active&quot;&gt;Active&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Link&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;nav-link disabled&quot;&gt;Disabled&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title&quot;&gt;Special title treatment&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm text-muted&quot;&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-sm btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug9" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Pills inside card header
.card.text-center
  .card-header
    ul.nav.nav-pills.card-header-pills
      li.nav-item
        a.nav-link.active(href=&quot;#&quot;) Active
      li.nav-item
        a.nav-link(href=&quot;#&quot;) Link
      li.nav-item
        a.nav-link.disabled(href=&quot;#&quot;) Disabled
  .card-body
    h5.card-title Special title treatment
    p.card-text With supporting text below as a natural lead-in to additional content.
    a.btn.btn-sm.btn-primary(href=&quot;#&quot;) Go somewhere
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- List group inside card-->
          <section class="pb-5 mb-md-2" id="card-list-group">
            <h2 class="h5 mb-3">List group inside card</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result10" data-bs-toggle="tab" role="tab" aria-controls="result10" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html10" data-bs-toggle="tab" role="tab" aria-controls="html10" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug10" data-bs-toggle="tab" role="tab" aria-controls="pug10" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result10" role="tabpanel">
                    <div class="row">
                      <div class="col-md-6">
                        <div class="card">
                          <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text fs-sm text-muted">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                          </div>
                          <ul class="list-group list-group-flush">
                            <li class="list-group-item">Cras justo odio</li>
                            <li class="list-group-item">Dapibus ac facilisis in</li>
                            <li class="list-group-item">Vestibulum at eros</li>
                          </ul>
                          <div class="card-body"><a class="btn btn-sm btn-primary" href="#">Go somewhere</a></div>
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="card">
                          <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text fs-sm text-muted">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                          </div>
                          <div class="list-group list-group-flush"><a class="list-group-item list-group-item-action" href="#">Cras justo odio</a><a class="list-group-item list-group-item-action" href="#">Dapibus ac facilisis in</a><a class="list-group-item list-group-item-action" href="#">Vestibulum at eros</a></div>
                          <div class="card-body"><a class="btn btn-sm btn-primary" href="#">Go somewhere</a></div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html10" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Simple list group inside card --&gt;
&lt;div class=&quot;card&quot;&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm text-muted&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
  &lt;ul class=&quot;list-group list-group-flush&quot;&gt;
    &lt;li class=&quot;list-group-item&quot;&gt;Cras justo odio&lt;/li&gt;
    &lt;li class=&quot;list-group-item&quot;&gt;Dapibus ac facilisis in&lt;/li&gt;
    &lt;li class=&quot;list-group-item&quot;&gt;Vestibulum at eros&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-sm btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Actionable list group inside card --&gt;
&lt;div class=&quot;card&quot;&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm text-muted&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;list-group list-group-flush&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;Cras justo odio&lt;/a&gt;
    &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;Dapibus ac facilisis in&lt;/a&gt;
    &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;Vestibulum at eros&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-sm btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug10" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Simple list group inside card
.card
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm.text-muted
      | Some quick example text to build on the card title and make up the bulk of the card's content.
  ul.list-group.list-group-flush
    li.list-group-item Cras justo odio
    li.list-group-item Dapibus ac facilisis in
    li.list-group-item Dapibus ac facilisis in
  .card-body
    a.btn.btn-sm.btn-primary(href=&quot;#&quot;) Go somewhere

// Actionable list group inside card
.card
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm.text-muted
      | Some quick example text to build on the card title and make up the bulk of the card's content.
  .list-group.list-group-flush
    a(href=&quot;#&quot;).list-group-item.list-group-item-action
      | Cras justo odio
    a(href=&quot;#&quot;).list-group-item.list-group-item-action
      | Dapibus ac facilisis in
    a(href=&quot;#&quot;).list-group-item.list-group-item-action
      | Dapibus ac facilisis in
  .card-body
    a.btn.btn-sm.btn-primary(href=&quot;#&quot;) Go somewhere
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Card styles: Background and color-->
          <section class="pb-5 mb-md-2" id="card-bg-color">
            <h2 class="h5 mb-3">Card styles: Background and color</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result11" data-bs-toggle="tab" role="tab" aria-controls="result11" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html11" data-bs-toggle="tab" role="tab" aria-controls="html11" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug11" data-bs-toggle="tab" role="tab" aria-controls="pug11" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result11" role="tabpanel">
                    <div class="row">
                      <div class="col-sm-6 mb-4">
                        <div class="card text-white bg-primary">
                          <div class="card-header">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-white">Primary card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
                          </div>
                        </div>
                      </div>
                      <div class="col-sm-6 mb-4">
                        <div class="card text-white bg-accent">
                          <div class="card-header">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-white">Accent card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-sm-6 mb-4">
                        <div class="card bg-secondary">
                          <div class="card-header">Header</div>
                          <div class="card-body">
                            <h5 class="card-title">Secondary card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
                          </div>
                        </div>
                      </div>
                      <div class="col-sm-6 mb-4">
                        <div class="card text-white bg-success">
                          <div class="card-header">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-white">Success card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-sm-6 mb-4">
                        <div class="card text-white bg-danger">
                          <div class="card-header">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-white">Danger card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
                          </div>
                        </div>
                      </div>
                      <div class="col-sm-6 mb-4">
                        <div class="card text-white bg-warning">
                          <div class="card-header">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-white">Warning card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-sm-6 mb-4">
                        <div class="card text-white bg-info">
                          <div class="card-header">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-white">Info card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
                          </div>
                        </div>
                      </div>
                      <div class="col-sm-6 mb-4">
                        <div class="card text-white bg-dark">
                          <div class="card-header">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-white">Dark card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html11" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Primary card --&gt;
&lt;div class=&quot;card text-white bg-primary&quot;&gt;
  &lt;div class=&quot;card-header&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-white&quot;&gt;Primary card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Accent card --&gt;
&lt;div class=&quot;card bg-accent&quot;&gt;
  &lt;div class=&quot;card-header&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title&quot;&gt;Secondary card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Secondary card --&gt;
&lt;div class=&quot;card bg-primary&quot;&gt;
  &lt;div class=&quot;card-header&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title&quot;&gt;Secondary card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Success card --&gt;
&lt;div class=&quot;card text-white bg-success&quot;&gt;
  &lt;div class=&quot;card-header&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-white&quot;&gt;Success card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Danger card --&gt;
&lt;div class=&quot;card text-white bg-danger&quot;&gt;
  &lt;div class=&quot;card-header&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-white&quot;&gt;Danger card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Warning card --&gt;
&lt;div class=&quot;card text-white bg-warning&quot;&gt;
  &lt;div class=&quot;card-header&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-white&quot;&gt;Warning card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Info card --&gt;
&lt;div class=&quot;card text-white bg-info&quot;&gt;
  &lt;div class=&quot;card-header&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-white&quot;&gt;Info card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Dark card --&gt;
&lt;div class=&quot;card text-white bg-dark&quot;&gt;
  &lt;div class=&quot;card-header&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-white&quot;&gt;Dark card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug11" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Primary card
.card.text-white.bg-primary
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Primary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Accent card
.card.text-white.bg-accent
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Secondary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Secondary card
.card.bg-secondary
  .card-header Header
  .card-body
    h5.card-title
      | Secondary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Success card
.card.text-white.bg-success
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Success card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Danger card
.card.text-white.bg-danger
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Danger card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Warning card
.card.text-white.bg-warning
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Warning card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Info card
.card.text-white.bg-info
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Info card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Dark card
.card.text-white.bg-dark
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Dark card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Card styles: Faded background and color-->
          <section class="pb-5 mb-md-2" id="card-bg-faded-color">
            <h2 class="h5 mb-3">Card styles: Faded background and color</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result12" data-bs-toggle="tab" role="tab" aria-controls="result12" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html12" data-bs-toggle="tab" role="tab" aria-controls="html12" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug12" data-bs-toggle="tab" role="tab" aria-controls="pug12" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result12" role="tabpanel">
                    <div class="row">
                      <div class="col-sm-6 mb-4">
                        <div class="card text-primary bg-faded-primary border-primary">
                          <div class="card-header text-primary border-primary">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-primary">Primary card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
                          </div>
                        </div>
                      </div>
                      <div class="col-sm-6 mb-4">
                        <div class="card text-accent bg-faded-accent border-accent">
                          <div class="card-header border-accent">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-accent">Accent card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-sm-6 mb-4">
                        <div class="card text-success bg-faded-success border-success">
                          <div class="card-header border-success">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-success">Success card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
                          </div>
                        </div>
                      </div>
                      <div class="col-sm-6 mb-4">
                        <div class="card text-danger bg-faded-danger border-danger">
                          <div class="card-header border-danger">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-danger">Danger card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-sm-6 mb-4">
                        <div class="card text-warning bg-faded-warning border-warning">
                          <div class="card-header border-warning">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-warning">Warning card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
                          </div>
                        </div>
                      </div>
                      <div class="col-sm-6 mb-4">
                        <div class="card text-info bg-faded-info border-info">
                          <div class="card-header border-info">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-info">Info card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-sm-6 mb-4">
                        <div class="card text-dark bg-faded-dark border-dark">
                          <div class="card-header border-dark">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-dark">Dark card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html12" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Faded primary card --&gt;
&lt;div class=&quot;card text-primary bg-faded-primary border-primary&quot;&gt;
  &lt;div class=&quot;card-header border-primary&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-white&quot;&gt;Primary card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Faded accent card --&gt;
&lt;div class=&quot;card text-accent bg-faded-accent border-accent&quot;&gt;
  &lt;div class=&quot;card-header border-accent&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-accent&quot;&gt;Secondary card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Faded success card --&gt;
&lt;div class=&quot;card text-success bg-faded-success border-success&quot;&gt;
  &lt;div class=&quot;card-header border-success&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-success&quot;&gt;Success card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Faded danger card --&gt;
&lt;div class=&quot;card text-danger bg-faded-danger border-danger&quot;&gt;
  &lt;div class=&quot;card-header border-danger&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-danger&quot;&gt;Danger card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Faded warning card --&gt;
&lt;div class=&quot;card text-warning bg-faded-warning border-warning&quot;&gt;
  &lt;div class=&quot;card-header border-warning&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-warning&quot;&gt;Warning card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Faded info card --&gt;
&lt;div class=&quot;card text-info bg-faded-info border-info&quot;&gt;
  &lt;div class=&quot;card-header border-info&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-info&quot;&gt;Info card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Faded dark card --&gt;
&lt;div class=&quot;card text-dark bg-faded-dark border-dark&quot;&gt;
  &lt;div class=&quot;card-header border-dark&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-dark&quot;&gt;Dark card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug12" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Faded primary card
.card.text-primary.bg-faded-primary.border-primary
  .card-header.border-primary Header
  .card-body
    h5.card-title.text-primary
      | Primary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Faded accent card
.card.text-accent.bg-faded-accent.border-accent
  .card-header.border-accent Header
  .card-body
    h5.card-title.text-accent
      | Secondary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Faded success card
.card.text-white.bg-faded-success.border-success
  .card-header.border-success Header
  .card-body
    h5.card-title.text-white
      | Success card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Faded danger card
.card.text-white.bg-faded-danger.border-danger
  .card-header.border-danger Header
  .card-body
    h5.card-title.text-white
      | Danger card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Faded warning card
.card.text-white.bg-faded-warning.border-warning
  .card-header.border-warning Header
  .card-body
    h5.card-title.text-white
      | Warning card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Faded info card
.card.text-white.bg-faded-info.border-info
  .card-header.border-info Header
  .card-body
    h5.card-title.text-white
      | Info card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Faded dark card
.card.text-white.bg-faded-dark.border-dark
  .card-header.border-dark Header
  .card-body
    h5.card-title.text-white
      | Dark card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Card styles: Border and color-->
          <section class="pb-5 mb-md-2" id="card-border-color">
            <h2 class="h5 mb-3">Card styles: Border and color</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result13" data-bs-toggle="tab" role="tab" aria-controls="result13" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html13" data-bs-toggle="tab" role="tab" aria-controls="html13" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug13" data-bs-toggle="tab" role="tab" aria-controls="pug13" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result13" role="tabpanel">
                    <div class="row">
                      <div class="col-sm-6 mb-4">
                        <div class="card text-primary border-primary">
                          <div class="card-header border-primary">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-primary">Primary card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                          </div>
                        </div>
                      </div>
                      <div class="col-sm-6 mb-4">
                        <div class="card text-accent border-accent">
                          <div class="card-header border-accent">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-accent">Accent card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-sm-6 mb-4">
                        <div class="card">
                          <div class="card-header">Header</div>
                          <div class="card-body">
                            <h5 class="card-title">Secondary card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                          </div>
                        </div>
                      </div>
                      <div class="col-sm-6 mb-4">
                        <div class="card text-success border-success">
                          <div class="card-header border-success">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-success">Success card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-sm-6 mb-4">
                        <div class="card text-danger border-danger">
                          <div class="card-header border-danger">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-danger">Danger card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                          </div>
                        </div>
                      </div>
                      <div class="col-sm-6 mb-4">
                        <div class="card text-warning border-warning">
                          <div class="card-header border-warning">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-warning">Warning card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-sm-6 mb-4">
                        <div class="card text-info border-info">
                          <div class="card-header border-info">Header</div>
                          <div class="card-body">
                            <h5 class="card-title text-info">Info card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                          </div>
                        </div>
                      </div>
                      <div class="col-sm-6 mb-4">
                        <div class="card text-dark border-dark">
                          <div class="card-header border-dark">Header</div>
                          <div class="card-body">
                            <h5 class="card-title">Dark card title</h5>
                            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html13" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Primary card --&gt;
&lt;div class=&quot;card text-primary border-primary&quot;&gt;
  &lt;div class=&quot;card-header border-primary&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-primary&quot;&gt;Primary card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Accent card --&gt;
&lt;div class=&quot;card text-accent border-accent&quot;&gt;
  &lt;div class=&quot;card-header border-accent&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-accent&quot;&gt;Accent card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Secondary card --&gt;
&lt;div class=&quot;card&quot;&gt;
  &lt;div class=&quot;card-header&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title&quot;&gt;Secondary card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Success card --&gt;
&lt;div class=&quot;card text-success border-success&quot;&gt;
  &lt;div class=&quot;card-header border-success&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-success&quot;&gt;Success card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Danger card --&gt;
&lt;div class=&quot;card text-danger border-danger&quot;&gt;
  &lt;div class=&quot;card-header border-danger&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-danger&quot;&gt;Danger card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Warning card --&gt;
&lt;div class=&quot;card text-warning border-warning&quot;&gt;
  &lt;div class=&quot;card-header border-warning&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-warning&quot;&gt;Warning card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Info card --&gt;
&lt;div class=&quot;card text-info border-info&quot;&gt;
  &lt;div class=&quot;card-header border-info&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title text-info&quot;&gt;Info card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Dark card --&gt;
&lt;div class=&quot;card text-dark border-dark&quot;&gt;
  &lt;div class=&quot;card-header border-dark&quot;&gt;Header&lt;/div&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;h5 class=&quot;card-title&quot;&gt;Dark card title&lt;/h5&gt;
    &lt;p class=&quot;card-text fs-sm&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug13" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Primary card
.card.text-primary.border-primary
  .card-header.border-primary
    | Header
  .card-body
    h5.card-title.text-primary
      | Primary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Accent card
.card.text-accent.border-accent
  .card-header.border-accent
    | Header
  .card-body
    h5.card-title.text-accent
      | Accent card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Secondary card
.card
  .card-header
    | Header
  .card-body
    h5.card-title
      | Secondary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Success card
.card.text-success.border-success
  .card-header.border-success
    | Header
  .card-body
    h5.card-title.text-success
      | Success card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Danger card
.card.text-danger.border-danger
  .card-header.border-danger
    | Header
  .card-body
    h5.card-title.text-danger
      | Danger card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Warning card
.card.text-warning.border-warning
  .card-header.border-warning
    | Header
  .card-body
    h5.card-title.text-warning
      | Warning card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Info card
.card.text-info.border-info
  .card-header.border-info
    | Header
  .card-body
    h5.card-title.text-info
      | Info card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Dark card
.card.text-dark.border-dark
  .card-header.border-dark
    | Header
  .card-body
    h5.card-title
      | Dark card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Card group-->
          <section class="pb-5 mb-md-2" id="card-group">
            <h2 class="h5 mb-3">Card group</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result14" data-bs-toggle="tab" role="tab" aria-controls="result14" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html14" data-bs-toggle="tab" role="tab" aria-controls="html14" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug14" data-bs-toggle="tab" role="tab" aria-controls="pug14" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result14" role="tabpanel">
                    <div class="card-group">
                      <div class="card"><img class="card-img-top" src="../img/components/cards/01.jpg" alt="Card image">
                        <div class="card-body">
                          <h5 class="card-title">Card title</h5>
                          <p class="card-text fs-sm text-muted">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p><a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
                        </div>
                      </div>
                      <div class="card"><img class="card-img-top" src="../img/components/cards/04.jpg" alt="Card image">
                        <div class="card-body">
                          <h5 class="card-title">Card title</h5>
                          <p class="card-text fs-sm text-muted">This card has supporting text below as a natural lead-in to additional content.</p><a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
                        </div>
                      </div>
                      <div class="card"><img class="card-img-top" src="../img/components/cards/02.jpg" alt="Card image">
                        <div class="card-body">
                          <h5 class="card-title">Card title</h5>
                          <p class="card-text fs-sm text-muted">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p><a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html14" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Card group --&gt;
&lt;div class=&quot;card-group&quot;&gt;

  &lt;!-- Card --&gt;
  &lt;div class=&quot;card&quot;&gt;
    &lt;img src=&quot;pat-to-image&quot; class=&quot;card-img-top&quot; alt=&quot;Card image&quot;&gt;
    &lt;div class=&quot;card-body&quot;&gt;
      &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
      &lt;p class=&quot;card-text fs-sm text-muted&quot;&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
      &lt;a href=&quot;#&quot; class=&quot;btn btn-sm btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- Card --&gt;
  &lt;div class=&quot;card&quot;&gt;
    &lt;img src=&quot;pat-to-image&quot; class=&quot;card-img-top&quot; alt=&quot;Card image&quot;&gt;
    &lt;div class=&quot;card-body&quot;&gt;
      &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
      &lt;p class=&quot;card-text fs-sm text-muted&quot;&gt;This card has supporting text below as a natural lead-in to additional content.&lt;/p&gt;
      &lt;a href=&quot;#&quot; class=&quot;btn btn-sm btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- Card --&gt;
  &lt;div class=&quot;card&quot;&gt;
    &lt;img src=&quot;pat-to-image&quot; class=&quot;card-img-top&quot; alt=&quot;Card image&quot;&gt;
    &lt;div class=&quot;card-body&quot;&gt;
      &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
      &lt;p class=&quot;card-text fs-sm text-muted&quot;&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.&lt;/p&gt;
      &lt;a href=&quot;#&quot; class=&quot;btn btn-sm btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug14" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Card group
.card-group

  // Card
  .card
    img(src=&quot;path-to-image&quot;, alt=&quot;Card image&quot;).card-img-top
    .card-body
      h5.card-title
        | Card title
      p.card-text.fs-sm.text-muted
        | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
      a.btn.btn-sm.btn-primary(href=&quot;#&quot;) Go somewhere
  
  // Card
  .card
    img(src=&quot;path-to-image&quot;, alt=&quot;Card image&quot;).card-img-top
    .card-body
      h5.card-title
        | Card title
      p.card-text.fs-sm.text-muted
        | This card has supporting text below as a natural lead-in to additional content.
      a.btn.btn-sm.btn-primary(href=&quot;#&quot;) Go somewhere
  
  // Card
  .card
    img(src=&quot;path-to-image&quot;, alt=&quot;Card image&quot;).card-img-top
    .card-body
      h5.card-title
        | Card title
      p.card-text.fs-sm.text-muted
        | This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
      a.btn.btn-sm.btn-primary(href=&quot;#&quot;) Go somewhere
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Masonry grid-->
          <section class="pb-5 mb-md-2" id="card-masonry">
            <h2 class="h5 mb-3">Masonry grid</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result15" data-bs-toggle="tab" role="tab" aria-controls="result15" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html15" data-bs-toggle="tab" role="tab" aria-controls="html15" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug15" data-bs-toggle="tab" role="tab" aria-controls="pug15" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result15" role="tabpanel">
                    <div class="masonry-grid" data-columns="3">
                      <div class="masonry-grid-item">
                        <div class="card"><img class="card-img-top" src="../img/components/cards/01.jpg" alt="Card image">
                          <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text fs-sm">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p><span class="text-muted fs-xs">Last updated 3 mins ago</span>
                          </div>
                        </div>
                      </div>
                      <div class="masonry-grid-item">
                        <div class="card"><img class="card-img-top" src="../img/components/cards/02.jpg" alt="Card image">
                          <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text fs-sm">This card has supporting text below as a natural lead-in to additional content.</p>
                          </div>
                        </div>
                      </div>
                      <div class="masonry-grid-item">
                        <div class="card"><img class="card-img" src="../img/components/cards/03.jpg" alt="Card image"></div>
                      </div>
                      <div class="masonry-grid-item">
                        <div class="card">
                          <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text fs-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><span class="text-muted fs-xs">Last updated 3 mins ago</span>
                          </div>
                        </div>
                      </div>
                      <div class="masonry-grid-item">
                        <div class="card border border-primary text-center">
                          <div class="card-body">
                            <p class="card-text fs-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><span class="text-muted fs-xs">Last updated 3 mins ago</span>
                          </div>
                        </div>
                      </div>
                      <div class="masonry-grid-item">
                        <div class="card border border-accent">
                          <div class="card-body">
                            <p class="card-text fs-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><span class="text-muted fs-xs">Last updated 3 mins ago</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html15" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Masonry grid --&gt;
&lt;div class=&quot;masonry-grid&quot; data-columns=&quot;3&quot;&gt;

  &lt;!-- Item --&gt;
  &lt;div class=&quot;masonry-grid-item&quot;&gt;
    &lt;div class=&quot;card&quot;&gt;
      &lt;img class=&quot;card-img-top&quot; src=&quot;path-to-image&quot; alt=&quot;Card image&quot;&gt;
      &lt;div class=&quot;card-body&quot;&gt;
        &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
        &lt;p class=&quot;card-text fs-sm&quot;&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;&lt;span class=&quot;text-muted fs-xs&quot;&gt;Last updated 3 mins ago&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- Item --&gt;
  &lt;div class=&quot;masonry-grid-item&quot;&gt;
    &lt;div class=&quot;card&quot;&gt;
      &lt;img class=&quot;card-img-top&quot; src=&quot;path-to-image&quot; alt=&quot;Card image&quot;&gt;
      &lt;div class=&quot;card-body&quot;&gt;
        &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
        &lt;p class=&quot;card-text fs-sm&quot;&gt;This card has supporting text below as a natural lead-in to additional content.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- Item --&gt;
  &lt;div class=&quot;masonry-grid-item&quot;&gt;
    &lt;div class=&quot;card&quot;&gt;
      &lt;img class=&quot;card-img&quot; src=&quot;path-to-image&quot; alt=&quot;Card image&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- Item --&gt;
  &lt;div class=&quot;masonry-grid-item&quot;&gt;
    &lt;div class=&quot;card&quot;&gt;
      &lt;div class=&quot;card-body&quot;&gt;
        &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
        &lt;p class=&quot;card-text fs-sm&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;&lt;span class=&quot;text-muted fs-xs&quot;&gt;Last updated 3 mins ago&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- Item --&gt;
  &lt;div class=&quot;masonry-grid-item&quot;&gt;
    &lt;div class=&quot;card border border-primary text-center&quot;&gt;
      &lt;div class=&quot;card-body&quot;&gt;
        &lt;p class=&quot;card-text fs-sm&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;&lt;span class=&quot;text-muted fs-xs&quot;&gt;Last updated 3 mins ago&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- Item --&gt;
  &lt;div class=&quot;masonry-grid-item&quot;&gt;
    &lt;div class=&quot;card border border-accent&quot;&gt;
      &lt;div class=&quot;card-body&quot;&gt;
        &lt;p class=&quot;card-text fs-sm&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;&lt;span class=&quot;text-muted fs-xs&quot;&gt;Last updated 3 mins ago&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug15" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Masonry grid
.masonry-grid(data-columns=&quot;3&quot;)

  // Item
  .masonry-grid-item
    .card
      img(src=&quot;path-to-image&quot;, alt=&quot;Card image&quot;).card-img-top
      .card-body
        h5.card-title Card title
        p.card-text.fs-sm This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
        span.text-muted.fs-xs Last updated 3 mins ago

  // Item
  .masonry-grid-item
    .card
      img(src=&quot;path-to-image&quot;, alt=&quot;Card image&quot;).card-img-top
      .card-body
        h5.card-title Card title
        p.card-text.fs-sm This card has supporting text below as a natural lead-in to additional content.
  
  // Item
  .masonry-grid-item
    .card
      img(src=&quot;path-to-image&quot;, alt=&quot;Card image&quot;).card-img
  
  // Item
  .masonry-grid-item
    .card
      .card-body
        h5.card-title Card title
        p.card-text.fs-sm Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        span.text-muted.fs-xs Last updated 3 mins ago
  
  // Item
  .masonry-grid-item
    .card.border.border-primary.text-center
      .card-body
        p.card-text.fs-sm Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        span.text-muted.fs-xs Last updated 3 mins ago

  // Item
  .masonry-grid-item
    .card.border.border-accent
      .card-body
        p.card-text.fs-sm Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        span.text-muted.fs-xs Last updated 3 mins ago</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
        <!-- Quick (anchor) navigation-->
        <div class="col-xxl-3 d-none d-xxl-block ps-5">
          <aside class="sticky-top pt-5">
            <div class="pt-5 mt-5">
              <div class="widget widget-links ps-4 border-start">
                <h3 class="widget-title">Jump to</h3>
                <ul class="widget-list">
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#card-no-image">No image</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#card-alt-style">Alternative card style</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#card-top-image">Image on top</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#card-bottom-image">Image on bottom</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#card-horizontal">Horizontal layout</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#card-header-footer">Header and footer</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#card-text-alignment">Text alignment</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#card-nav-tabs">Navigation: Tabs</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#card-nav-pills">Navigation: Pills</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#card-list-group">List group inside card</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#card-bg-color">Card styles: Background and color</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#card-bg-faded-color">Card styles: Faded background and color</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#card-border-color">Card styles: Border and color</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#card-group">Card group</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#card-masonry">Masonry grid</a>
                  </li>
                </ul>
              </div>
            </div>
          </aside>
        </div>
      </section>
    </main>
    <!-- Back To Top Button--><a class="btn-scroll-top" href="#top" data-scroll data-fixed-element><span class="btn-scroll-top-tooltip text-muted fs-sm me-2">Top</span><i class="btn-scroll-top-icon ci-arrow-up">   </i></a>
    <!-- Vendor scrits: js libraries and plugins-->
    <script src="../vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../vendor/simplebar/dist/simplebar.min.js"></script>
    <script src="../vendor/tiny-slider/dist/min/tiny-slider.js"></script>
    <script src="../vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
    <script src="../vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
    <script src="../vendor/shufflejs/dist/shuffle.min.js"></script>
    <script src="../vendor/prismjs/components/prism-core.min.js"></script>
    <script src="../vendor/prismjs/components/prism-markup.min.js"></script>
    <script src="../vendor/prismjs/components/prism-clike.min.js"></script>
    <script src="../vendor/prismjs/components/prism-javascript.min.js"></script>
    <script src="../vendor/prismjs/components/prism-pug.min.js"></script>
    <script src="../vendor/prismjs/plugins/toolbar/prism-toolbar.min.js"></script>
    <script src="../vendor/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
    <script src="../vendor/prismjs/plugins/line-numbers/prism-line-numbers.min.js"></script>
    <!-- Main theme script-->
    <script src="../js/theme.min.js"></script>
  </body>
</html>